<template>
	<view>
		<div class="boxs">
			<scroll-view scroll-y="true" class="left" :style="{height:wh}">
				<van-sidebar :active-key="activeKey">
					<van-sidebar-item :title="item.cat_name" v-for="(item,index) in parents" :key="index"
						@tap="ddd(index)" />
				</van-sidebar>
			</scroll-view>
			<scroll-view scroll-y="true" class="right" :style="{height:wh}">
				<div v-for="(item,index) in child" :key="index">
					<h1 class="top">{{item.cat_name}}</h1>
					<van-grid column-num="3">
						<van-grid-item use-slot v-for="(it,ind) in item.children" :key="index" class="bottom"
							:url="'/pages/list/list?id='+it.cat_id">
							<image :src="it.cat_icon"></image>
							<p>{{it.cat_name}}</p>
						</van-grid-item>
					</van-grid>
				</div>
			</scroll-view>
		</div>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeKey: 0,
				parents: [],
				child: [],
				wh: 0
			};
		},
		onLoad() {
			this.getlist()
			var obj = wx.getSystemInfoSync()
			this.wh = obj.windowHeight - 2 + 'px'
		},
		methods: {
			async getlist() {
				let {
					data: res
				} = await uni.$http.get("/api/public/v1/categories")
				console.log(res)
				this.parents = res.message
				this.child = res.message[0].children
			},
			ddd(index) {
				this.child = this.parents[index].children
			}
		}
	}
</script>

<style lang="scss">
	.boxs {
		width: 750rpx;
		display: flex;
		justify-content: space-between;

		.left {
			width: 200rpx;

		}

		.right {
			width: 550rpx;

			h1 {
				font-size: 45rpx;
				margin: 30rpx;
			}

			;

			.bottom {
				width: 80rpx;
				height: 80rpx;

				p {
					font-size: 30rpx;
				}

				image {
					width: 65rpx;
					height: 65rpx;
				}
			}
		}
	}
</style>
